<template>
  <div class="container">
    <div class="top">
      <template v-for="(item, index) in topList" :key="index">
        <H-tips :title="item.title">
          <div @click="() => ItemClickHandlerFN(item, index)" :class="{ item: true, active: index === activeIndex }">
            <div class="icon">
              <component :is="item.icon" :width="item.width" :height="item.height"></component>
            </div>
          </div>
        </H-tips>
      </template>
    </div>
    <div class="bottom">
      <template v-for="(item, index) in bottomList" :key="index">
        <H-tips :title="item.title">
          <div class="item">
            <component :is="item.icon" :width="item.width" :height="item.height"></component>
          </div>
        </H-tips>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
export type listType = {
  icon: string,
  width: number,
  height: number,
  title: string,
  component: string,
}
</script>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const emit = defineEmits(['select-item'])

const topList = ref<listType[]>([
  {
    icon: 'Icon-article',
    width: 26,
    height: 26,
    title: "文章管理",
    component: 'Article',
  },
  {
    icon: 'Icon-catalog',
    width: 35,
    height: 35,
    title: "目录",
    component: '',
  },
  {
    icon: 'Icon-file',
    width: 35,
    height: 35,
    title: "文件",
    component: '',
  }
])
const bottomList = ref<listType[]>([
  {
    icon: 'Icon-setting',
    width: 35,
    height: 35,
    title: "设置",
    component: '',
  },
])
onMounted(() => {
  emit('select-item', topList.value[0])
})
const activeIndex = ref(0)
const ItemClickHandlerFN = (item: listType, index: number) => {
  emit('select-item', item)
  activeIndex.value = index
}
</script>
<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top,
.bottom {
  .item {
    // width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 2px;
    border-left: 2px solid transparent;

    &:hover {
      filter: brightness(130%);
      cursor: pointer;
    }
  }

  .active {
    border-left: 2px solid var(--active);
  }
}
</style>